/* 
    Document   : default
    Created on : 17/03/2014, 01:15:08 PM
    Author     : Ximena
    Description:
        Purpose of the stylesheet follows.
*/

@font-face
{
    font-family: Helvetica Neue;
    src: local("Helvetica Neue"), url('../fonts/FredokaOne-Regular.ttf');
}

body{
    background-color: #FFF;
    background-image: url('../images/fondo.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 0;
    font-family: sans-serif;
    /*    background: rgb(183,222,237);  Old browsers 
        background: -moz-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(33,180,226,1) 2%, rgba(33,180,226,1) 2%, rgba(113,206,239,1) 50%, rgba(183,222,237,1) 100%);  FF3.6+ 
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(183,222,237,1)), color-stop(2%,rgba(33,180,226,1)), color-stop(2%,rgba(33,180,226,1)), color-stop(50%,rgba(113,206,239,1)), color-stop(100%,rgba(183,222,237,1)));  Chrome,Safari4+ 
        background: -webkit-linear-gradient(top, rgba(183,222,237,1) 0%,rgba(33,180,226,1) 2%,rgba(33,180,226,1) 2%,rgba(113,206,239,1) 50%,rgba(183,222,237,1) 100%);  Chrome10+,Safari5.1+ 
        background: -o-linear-gradient(top, rgba(183,222,237,1) 0%,rgba(33,180,226,1) 2%,rgba(33,180,226,1) 2%,rgba(113,206,239,1) 50%,rgba(183,222,237,1) 100%);  Opera 11.10+ 
        background: -ms-linear-gradient(top, rgba(183,222,237,1) 0%,rgba(33,180,226,1) 2%,rgba(33,180,226,1) 2%,rgba(113,206,239,1) 50%,rgba(183,222,237,1) 100%);  IE10+ 
        background: linear-gradient(to bottom, rgba(183,222,237,1) 0%,rgba(33,180,226,1) 2%,rgba(33,180,226,1) 2%,rgba(113,206,239,1) 50%,rgba(183,222,237,1) 100%);  W3C 
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 );  IE6-9 */
}

@font-face { 
    font-family: Frutiger;
    src: local("Frutiger"), url('../fonts/Frutiger CE 45 Light.ttf');  
} 

@font-face
{
    font-family: 'Helvetica Neue';
    src: url('HelveticaNeue.ttf'),
        url('HelveticaNeue.eot'); /* IE9 */
}

#wrapper{
    width: 900px;
    margin: 0 auto;
    padding: 0;
    float: left;
    width: 100%;
    background: url('../images/celeste.png');
    background-size: 100% 188px;
    background-repeat: no-repeat;
    /*    box-shadow: -5px 0px 65px #888888;*/
}
#login
{
    cursor: pointer;
}
#MenuInicio{
    width: 900px;
    height: 45px;
    text-align: center;
    background-color: #007D99;
    margin:0 auto;
}

#MenuInicio li{
    display:inline-block;
}

#arriba{
    width: 900px;
    height: 142px;
    margin: 0 auto;
}

#example{
    float: right;
    /*    width: 700px;*/
    display: inline;
}
#iconos{
    float: left;
    text-align: center;
    margin: 0;
    padding: 0;
}

li.icon{
    padding: 5px;
    margin: 0;
    font: white;
    font-size: 18px;
    font-family: 'Fredoka One',"Helvetica Neue",Calibri,Arial,Helvetica,sans-serif;
    text-align: center;
    /*    border:3px solid gray;
        border-radius:25px;*/
}
.icon a{
    font-family: 'Fredoka One',"Helvetica Neue",Calibri,Arial,Helvetica,sans-serif;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
}

#box_skitter box_skitter_large{
    margin: 0 auto;
}
#choose{
    background-color: #5CD2ED;
    padding-top: 10px;
    padding-bottom: 11px;
    margin: 0 auto;
}

li.icon:hover{
    background-color: #64c8ef;
    padding-top: 12px;
    padding-bottom: 11px;
    border-radius:7px;
    transition: background-color 1s;
    -webkit-transition: background-color 1s;
    -moz-transition: background-color 1s;
    -ms-transition: background-color 1s;
    -o-transition: background-color 1s;
    /*    padding-left: 1px;*/
    /*padding: 5px;*/
    /*    border:3px solid #333;
        border-radius:25px;*/
}
li#choose:hover{
    background-color: #64c8ef;
    padding-top: 10px;
    padding-bottom: 11px;
    border-radius:7px;
    transition: background-color 1s;
    -webkit-transition: background-color 1s;
    -moz-transition: background-color 1s;
    -ms-transition: background-color 1s;
    -o-transition: background-color 1s;
    /*    padding-left: 5px;*/
}

/*#example ul li{
    display: inline-block;
}*/

#logo{
    float: left;
    /*    position: absolute;
        left: 0;
        top: 5px;*/
}


li{
    list-style: none;
}

div #container
{
    /*    display: table-row;*/
    /*    border-spacing: 5px;*/
    width: 900px;
    margin: 0 auto;
    background-color: white;
    box-shadow: -5px 0px 65px #888888;
    height: 740px;
    /*overflow: auto;*/
}
aside {
    /*    display: table-cell;*/
    text-align: center;
    float: left;
    padding: 0px 5px 5px 5px;
    margin: 20px 10px;
    width: 120px;
}

aside div.tableContainer {
    display: table;
    position:relative;
    border-spacing: 2px;
}

aside div.tableRow {
    display: table-row;
}

aside div.tableRow p{
    display: table-cell;
    vertical-align: middle;
}

/*aside div.tableRow p:nth-child(odd){
    padding: 1px;
    /*border: 1px outset black;
    width:24px;
}
*/
aside div.tableRow p:nth-child(odd){
    padding: 2px 3px;
}

aside div.tableRow p:nth-child(odd) button{
    background-color: black;
    color: whitesmoke;
    font-size: 15px;
    font-weight: bold;
    width: 100px;
    height: 35px;
    border-style: hidden;
    text-align: left;
    transition: all 1s;
    border-radius: 5px;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
}

aside div.tableRow p:nth-child(odd) button.selected, body > aside div.tableRow p:nth-child(odd) button.selected:hover {
    background-color: #818181;
    transition: none;
    transform: none;
}

aside div.tableRow p:nth-child(odd) button:hover{
    background-color: #5CD2ED;
    transform: translate(1em,0);
    -webkit-transform: translate(1em,0);
    -moz-transform: translate(1em,0);
    -ms-transform: translate(1em,0);
    -o-transform: translate(1em,0);
    cursor: pointer;
}
section#main {
    width: 700px;
    float: left;
    text-align: left;
    padding: 2px;
    margin: 2px;
    height: 730px;
    background-color: whitesmoke;
/*    overflow: auto;*/

    border: 1px black;
    border-radius: 5px;
}
#main_content{
    padding: 5px 15px 0px 15px;
}

footer
{
    background-color: #007D99;
    color: white;
}
.Social
{
    cursor: pointer;
}
.Social:hover
{
    cursor: pointer;
    border: 1px black solid;
    background-color: whitesmoke;
    border-radius: 5px;
}
h2{
    font-family: 'Fredoka One',"Helvetica Neue",Calibri,Arial,Helvetica,sans-serif;
}

#divA
{
    width: 900px;
    margin: 0 auto;
    display: block;
    clear: both;
    display: table;
    height: 50px;
}
#Media{
    float: left;
    min-height: 300px;
    width: 370px;
    padding: 0 25px;
    background: url("../images/lineVert.png") no-repeat 370px 40px;
}
#Horario
{
    float: left;
    padding-right: 0;
    padding-left: 60px;
    width: 400px;
}
footer p{
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}